<template>
  <div class="app-container">
    <!--轮播-->
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="i in list" :key="i.id">
        <!--<img :src="convert(i.imgPath)" :alt="i.title" style="width: 100%;height: 200px;">-->
        <div class="img" :style="{'background-image': convert(i.imgPath)}"
             style="width: 100%;height: 200px;background-repeat: no-repeat;background-position: center;background-size: cover"></div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <!--表格-->
    <el-table
      height="47vh"
      :data="list"
      row-key="id"
      style="width: 100%"
      @row-click="rowClick">
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button plain type="primary" @click="reName(scope.$index)">修改标题</el-button>
          <el-button plain type="danger" @click="remove(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加按钮-->
    <el-button type="primary" class="add" icon="el-icon-plus" @click="preSingleImageVisible=true" circle></el-button>
    <el-button type="warning" class="upload" icon="el-icon-upload2" @click="flushAll" circle></el-button>
    <pre-single-image :autoCrop.boolean="false" :show.sync="preSingleImageVisible"
                      @success="success"></pre-single-image>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import convert from '../../utils/convert'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import Swiper from '../../api/swiper'
  import mixTable from '../../components/Table/mixTable'
  import Upload from '../../api/upload'
  import Sortable from 'sortablejs'
  import PreSingleImage from '../../components/Upload/preSingleImage'

  export default {
    name: 'Swiper',
    components: {
      mixTable, swiper, swiperSlide, PreSingleImage
    },
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        list: [],
        uploadPage: [],
        preSingleImageVisible: false,
      }
    },
    methods: {
      success(res) {
        this.add(res)
      },
      getData(pageParam) {
        Swiper.swiperList(pageParam).then(res => {
          this.list = res.data.list
          this.$nextTick(() => {
            this.setSort()
          })
        })
      },
      getUploadPage(pageParam) {
        Upload.imageList(pageParam).then(res => {
          this.uploadPage = res.data.page
        })
      },
      convert(p) {
        var url = 'url(' + convert.pathToUrl(p) + ')'
        url = url.replace(/\\/g, '\/')
        // console.log(url)
        return url
      },
      add(item) {
        this.list.push({
          uploadId: item.id,
          imgPath: item.path,
          id: parseInt(Math.random() * 1000)
        })
      },
      rowClick(row) {
        for (let i = 0; i < this.list.length; i++) {
          if (row.id === this.list[i].id) {
            this.$refs.mySwiper.swiper.slideTo(i, 1000, false)
          }
        }
      },
      reName(index) {
        this.$prompt('请输入标题', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: this.list[index].title
        }).then(({value}) => {
          this.$message({
            type: 'success',
            message: '修改标题: ' + value
          })
          this.$set(this.list[index], 'title', value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      remove(index) {
        this.list.splice(index, 1)
      },
      flushAll() {
        Swiper.flushAll(this.list).then(res => {
          if (res.data.succ === true) {
            this.$message({
              type: 'success',
              message: '上传成功'
            })
            this.getData()
          }
        })
      },
      setSort() {
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        Sortable.create(el, {
          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
          setData: function (dataTransfer) {
            dataTransfer.setData('Text', '')
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          },
          onEnd: evt => {
            const targetRow = this.list.splice(evt.oldIndex, 1)[0]
            this.$set(this.list, this.list.splice(evt.newIndex, 0, targetRow))
          }
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>
  .slice-item {
    text-align: center;
    height: calc(100vh - 50px - 34px - 40px);
    max-width: 100%;
    max-height: 100%;
  }

  .add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 999;
  }

  .upload {
    position: absolute;
    right: 10px;
    bottom: 60px;
    z-index: 999;
  }
</style>

